import { onBeforeMount, watch } from 'vue';
<template>
  <el-cascader
    v-model="areaValue"
    :options="areaOptions"
    @change="areaChange"
    :disabled="props.disabled"
  />
</template>
<script lang="ts" setup>
import { ref, onBeforeMount, watch } from "vue";
import { getCommonRegions } from "../api/user";

const areaValue = ref([]);
const areaOptions = ref([]);
const emits = defineEmits(["proCitySelectChange"]);

const props = defineProps({
  defaultAreaValue: Array<string | number>,
  disabled: Boolean
});

function areaChange(areaValue) {
  areaValue.value = areaValue;
  emits("proCitySelectChange", areaValue);
}

onBeforeMount(async () => {
  const regionRes = await getCommonRegions();
  areaOptions.value = regionRes.map(pro => {
    return {
      value: pro.id,
      label: pro.name,
      children: pro.city.map(city => {
        return {
          value: city.id,
          label: city.name,
          children: city.area.map(area => {
            return {
              value: area.id,
              label: area.name
            };
          })
        };
      })
    };
  });
});

defineExpose({
  areaValue
});
</script>
